import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import { useState } from 'react'
import './index.less'

interface ImageItem {
  id: string
  src: string
  title?: string
}

interface ImageGalleryModalProps {
  images: ImageItem[]
  initialIndex?: number
  onClose: () => void
}

const ImageGalleryModal: React.FC<ImageGalleryModalProps> = ({ images, initialIndex = 0, onClose }) => {
  const [currentIndex, setCurrentIndex] = useState(initialIndex)

  const handleClose = () => {
    onClose()
  }

  const handleSwiperChange = (e: any) => {
    setCurrentIndex(e.detail.current)
  }

  return (
    <View className='image-gallery-modal'>
      <View className='image-gallery-overlay' onClick={handleClose} />
      <View className='image-gallery-content'>
        {/* 头部 */}
        <View className='image-gallery-header'>
          <Text className='image-gallery-title'>{images[currentIndex]?.title || ''}</Text>
          <View className='image-gallery-close' onClick={handleClose}>
            <Text className='close-icon'>×</Text>
          </View>
        </View>

        {/* 图片轮播 */}
        <View className='image-gallery-body'>
          <Swiper
            className='image-gallery-swiper'
            current={currentIndex}
            onChange={handleSwiperChange}
            indicatorDots={false}
            autoplay={false}>
            {images.map((image) => (
              <SwiperItem key={image.id}>
                <View className='image-gallery-item'>
                  <Image src={image.src} className='image-gallery-image' mode='aspectFit' />
                </View>
              </SwiperItem>
            ))}
          </Swiper>
        </View>

        {/* 底部指示器 */}
        <View className='image-gallery-footer'>
          <Text className='image-gallery-indicator'>
            {currentIndex + 1} / {images.length}
          </Text>
        </View>
      </View>
    </View>
  )
}

export default ImageGalleryModal
